<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./layui/css/layui.css">
	<script type="text/javascript" src='./layui/layui.js'></script>
	
</head>
<body>
	<div style="width:200px,height:200px">
	<form action="" class="layui-form">
		用户名<input type="text" class="layui-input">
		性别：<input type="radio" name='sex' value="男" title="男">
			  <input type="radio" name='sex' value="女" title="女">
		地址<select name="" id="">
			<option value="">白云</option>
			<option value="">天河</option>
			<option value="">番禺</option>
			<option value="">越秀</option>
			<option value="">增城</option>
		</select>
		
	      <input type="checkbox" name="like[write]" title="写作">
	      <input type="checkbox" name="like[read]" title="阅读" checked>
	      <input type="checkbox" name="like[dai]" title="发呆">
	      <label class="layui-form-label">开关</label>
	      <input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭">

	    <select name="city" lay-verify="">
		  <option value="">请选择一个城市</option>
		  <option value="010">北京</option>
		  <option value="021" disabled>上海</option>
		  <option value="0571">杭州</option>
		</select> 
    	<textarea id="demo" style="display: none;" cols="25" rows="7"></textarea>

    	<div class="layui-progress">
    			  <div class="layui-progress-bar" lay-percent="80%"></div>
    			</div>

		<div class="layui-progress layui-progress-big" lay-showPercent="yes">
		  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
		</div>

		<input type="text" id='start' class="layui-input">
		<input type="text" id='end' class="layui-input">

	</form>
	</div>
	<script type="text/javascript">
		layui.use(['form','layedit','element','laydate'], function(){
			var form = layui.form();
			var layedit = layui.layedit;
			var element = layui.element();
			var laydate = layui.laydate;

			layedit.build('demo',{
				height:180,
				 //tool: ['left', 'center', 'right', '|', 'face']
			});

			var start = {
		    min: laydate.now()
		    ,max: '2099-06-16 23:59:59'
		    ,istoday: false
		    ,choose: function(datas){
		      end.min = datas; //开始日选好后，重置结束日的最小日期
		      end.start = datas //将结束日的初始值设定为开始日
		    }
		  };

		  var end = {
		    min: laydate.now()
		    ,max: '2099-06-16 23:59:59'
		    ,istoday: false
		    ,choose: function(datas){
		      start.max = datas; //结束日选好后，重置开始日的最大日期
		    }
		  };
		  
		  document.getElementById('start').onclick = function(){
		    start.elem = this;
		    laydate(start);
		  }
		  document.getElementById('end').onclick = function(){
		    end.elem = this
		    laydate(end);
		  }



		  
		});  

	</script>
</body>
</html>